import React, { useState } from "react";
import { View, Text, Image, StyleSheet, TouchableOpacity, ScrollView, Dimensions } from "react-native";
import { useNavigation } from "@react-navigation/native";
import {useSnapshot} from 'valtio' // 状态管理
import {state} from '@/store/index'

export const MallLimit = () => {
    const navigation = useNavigation();
    const snap = useSnapshot(state)
    const tab = snap.MallRecommended// 状态管理
    const styles = StyleSheet.create({
        boxitem: {
            display: 'flex', alignItems: 'center', flexDirection: 'column', padding: 5
        },
        redtitle: {
            color: 'red', fontSize: 16, marginBottom: 5
        },
        ffftitle: {
            color: '#000', fontSize: 16, marginBottom: 5
        },
        redtab: {
            backgroundColor: '#F73C3C', color: '#fff', fontSize: 10,
            padding: 5, borderRadius: 15, paddingLeft: 10, paddingRight: 10
        },
        ffftab: {
            backgroundColor: '#fff', color: '#999', fontSize: 10,
            padding: 5, borderRadius: 15, paddingLeft: 10, paddingRight: 10
        }
    })
    const data = [
        {
            id: 1,
            title: "推荐",
            tab: "猜你喜欢"
        },
        {
            id: 2,
            title: "护肤",
            tab: "护肤美体"
        },
        {
            id: 3,
            title: "食品",
            tab: "美食保健"
        },
        {
            id: 4,
            title: "时尚",
            tab: "流行穿搭"
        },
        {
            id: 5,
            title: "家居",
            tab: "生活百货"
        },
        {
            id: 6,
            title: "配饰",
            tab: "箱包配饰"
        },
        {
            id: 7,
            title: "运动",
            tab: "运动户外"
        },
        {
            id: 8,
            title: "母婴",
            tab: "宝妈精选"
        },
        {
            id: 9,
            title: "家电",
            tab: "家电数码"
        }
    ]
    const width = Dimensions.get('screen').width;
    const setTabs = (title: any) => {
        //调用ChangeMallRecommended函数，将title传入
        snap.ChangeMallRecommended(title)
        console.log(snap.MallRecommended,'mall');
    }
    return (
        <View style={{
            display: 'flex', flexDirection: 'row', justifyContent: 'space-between', padding: 10, backgroundColor: '#fff',
            width: width,
            height: 80
        }}>
            <ScrollView horizontal={true} >
                {
                    data.map(item => {
                        return <View key={item.id} style={styles.boxitem}>
                            <TouchableOpacity onPress={() => setTabs(item.title)} style={{alignItems: 'center'}}>
                            <Text style={tab === item.title ? styles.redtitle : styles.ffftitle} >{item.title}</Text>
                            <Text style={tab === item.title ? styles.redtab : styles.ffftab}>{item.tab}</Text>
                            </TouchableOpacity>
                          
                        </View>
                    })
                }
            </ScrollView>

        </View>
    )
}